import React from 'react'
import {connect} from 'react-redux'
import { Form, Button, message, Spin } from 'antd';
import {messages} from "share/common";
import Condition from "components/condition";
import Calculator from "containers/financial-account/template/calculator";
import credentialService from "containers/financial-account/credential-definition/credential-definition-service";
const FormItem = Form.Item;
const formItemLayout = {
  labelCol: { span: 2 , offset: 5},
  wrapperCol: { span: 8, offset: 1 },
};
const If = Condition.If;

class headerStyle extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      infoData: {},
      dataList: [],
      isEditing: false,
      loading: false,
      treeList: []
    }
  }

  componentDidMount() {
    this.setState({infoData: this.props.infoData},() => {
      this.getList();
      this.getTreeList();
    });
  }

  getTreeList = () => {
    const { infoData } = this.state;
    this.setState({treeLoading: true});
    this.setState({loading: true});
    credentialService.getTreeList({functionDefineId: infoData.functionDefineId}).then(res => {
      this.setState({
        treeList: res.data,
        loading: false
      });
    }).catch(e => {
      this.setState({loading: false});
      message.error(e.response.data.message);
    })
  };

  getList = () => {
    const { infoData } = this.state;
    let params = {
      templateId: infoData.id
    };
    this.setState({loading: true});
    credentialService.getCredentialDetail(params).then(res => {
      this.setState({
        dataList: res.data,
        loading: false
      })
    }).catch(e => {
      message.error(e.response.data.message);
      this.setState({loading: false});
    })
  };

  changeEdit = () => {
    const { isEditing } = this.state;
    this.setState({isEditing: !isEditing});
  };

  render(){
    const { dataList, isEditing, loading, infoData, treeList } = this.state;
    const { getFieldDecorator } = this.props.form;
    return(
      <Spin spinning={loading}>
        <div>
          <If value={isEditing}>
            <Button onClick={this.changeEdit} style={{marginLeft: '10px'}}>{messages('common.ok')/*确定*/}</Button>
          </If>
          <If value={!isEditing}>
            <Button onClick={this.changeEdit} type='primary'>{messages('common.edit')/*编辑*/}</Button>
          </If>
        </div>
        <Form style={{margin: '10px'}}>
          {
            dataList.map(item => {
              return (
                <FormItem label={item.ledgerName} {...formItemLayout}>
                  {getFieldDecorator(item.lineDefineId, {
                    rules: [{
                      required: item.isNotEmpty, message: messages('common.please.enter')/*请输入*/,
                    }],
                    initialValue: item.cellComment
                  })(
                    <Calculator disabled={!isEditing || !item.isCouldEdit}
                                infoData={{
                                  lineDefineId: item.lineDefineId,
                                  templateId: infoData.id
                                }}
                                treeList={treeList}/>
                  )}
                </FormItem>
              )
            })
          }
        </Form>
      </Spin>
    )
  }
}

function mapStateToProps(state){
  return {

  }
}

headerStyle.propTypes = {
  infoData: React.PropTypes.object.isRequired
};

headerStyle.defaultProps = {
  infoData: {}
};

const WrappedHeaderStyle = Form.create()(headerStyle);
export default connect(mapStateToProps)(WrappedHeaderStyle);
